<template>
  <div class="lineChart">
    <div class="lineTitle">活动收入支出年度趋势</div>
    <div class="acManageLineChart" ref="line_chart"></div>
  </div>
</template>
<script>
// import {emitter1,emitter2,emitter3} from '@/assets/utils/bus.js'
export default {
  data() {
    return {
      data: null // 服务器返回的对象
    }
  },
  mounted() {
    //生命周期
    // com-chart读取完成
    this.initChart()
    //window.addEventListener('resize', this.screenAdapter) // 屏幕大小发生变化进行监听，调用screenAdapter
    //this.screenAdapter() // 开始进行监听
  },
  /*unmounted() {
    // 取消事件监听
    window.removeEventListener('resize', this.screenAdapter)
  },*/
  methods: {
    initChart() {
      // 初始化EChartInstance实例对象
      // echarts 实例赋值给 reactive 响应式 Proxy对象，导致tooltip不显示
      let echarts = this.$ECharts.init(this.$refs.line_chart, 'chalk') // 使用ECharts主题
      const initOption = {
        grid: {
          // 坐标轴
          top: '15%', // 坐标轴跟图标距离
          bottom: '13%',
          left: '6%',
          right: '4%',
          containLabel: true // 防止坐标轴标签溢出
        },
        legend: {
          right: '2%',
          textStyle: {
            color: 'white'
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            textStyle: { color: '#fff' }
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              width: 0.3
            }
          },
          type: 'value',
          axisLine: {
            show: false
          },
          axisLabel: {
            textStyle: { color: '#fff' }
          }
        }
      }
      echarts.setOption(initOption)
      this.getData(echarts)
    },
    async getData(echarts) {
      // await、async
      // 获取服务器数据
      //const {data: result} = await this.$http.get('money') // money为后台接口
      // console.log(result)
      // 获取数据后更新echarts组件
      //this.data = result
      this.updateChart(echarts)
    },
    // 更新EChart
    updateChart(echarts) {
      const xArr = ['2016', '2017', '2018', '2019', '2020', '2021'] // data()中的数据才能被methods内所有方法引用
      const y1Arr = [40032.0, 106886.0, 112082.0, 212500.0, 264300.0, 312800.0]
      const y2Arr = [50176.0, 90736.0, 122132.0, 152432.0, 213416.0, 257688.0]
      const option = {
        color: ['#1ed133', 'orange'], // 几个图例几个颜色，写在legend之外
        tooltip: {
          trigger: 'axis', // 工具提示，鼠标点击到坐标轴显示横纵坐标,axis
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: '#ffffff',
              width: 0.6,
              type: 'dashed'
            }
          }
        },
        xAxis: {
          data: xArr,
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: { color: '#f2e5e5' },
            fontSize: 8
          },
          z: 10
        },
        legend: {
          data: ['资金来源', '资金用途'],
          textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '（单位/元）',
            nameTextStyle: {
              color: 'rgba(233,233,233,.7)',
              fontSize: 9,
              padding: [0, 20, 0, -30] // 上右下左与原位置距离
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#ccc',
              fontSize: 8,
              interval: 0
            },
            // 分割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#a13f3f',
                type: 'dashed' //虚线
              }
            }
          }
        ],
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        grid: {
          left: '20',
          containLabel: true
        },
        series: [
          {
            name: '资金来源',
            type: 'line',
            data: y1Arr,
            //stack: 'map', // 堆叠图，相同名
            /*markPoint: {
              data: [{ type: 'max' }, { type: 'min' }]
            }*/
            lineStyle: {
              color: '#1ed133'
            }
          },
          {
            name: '资金用途',
            type: 'line',
            data: y2Arr,
            /*markPoint: {
              data: [{ type: 'max' }, { type: 'min' }]
            }*/
            lineStyle: {
              color: 'orange'
            }
          }
        ]
      }
      echarts.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
.lineTitle {
  color: #fff;
  font-size: 0.375rem;
  font-weight: 900;
  font-family: monospace;
  background-color: rgb(182, 1, 1);
  height: 0.625rem;
  line-height: 0.625rem;
  padding-left: 0.25rem;
}
.acManageLineChart {
  width: 100%;
  height: 4.35rem;
  overflow: hidden;
}
</style>
